<template>
  
    <div>
        <!-- 新建补卡规则 -->
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <router-link to="/ShiftAdd"><el-button type="primary"  style="margin: 20px;">新建班次</el-button></router-link>
                </div>
            </el-col>
        </el-row>
        
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-form :inline="true" :model="shiftEntity" class="demo-form-inline">
                        <el-form-item style="margin: 20px;" label="关键词">
                            <el-input v-model="shiftEntity.shiftName" placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <el-form-item style="margin: 20px;" label="活动区域">
                            <el-date-picker
                              v-model="time"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              value-format="yyyy-MM-dd"
                              @change="setTime">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item style="margin: 20px;float: right;">
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                            <el-button @click="rest">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>

        <!-- 展示参数start -->
        <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <br>
                <el-table
                  :data="shift"
                  border
                  style="width: 95%;margin: auto;"
                  :header-cell-style="{backgroundColor:'#F4F4F4'}">
                  <el-table-column
                    prop="shiftName"
                    label="班次名称">
                  </el-table-column>
                  <el-table-column
                    label="考勤时间"
                    width="400px">
                    <template slot-scope="scope">
                      <span>
                        {{ scope.row.commuteSchedulePO.startTime }} ~ {{ scope.row.commuteSchedulePO.endTime }}
                      </span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="startBy"
                    label="创建人">
                  </el-table-column>
                  <el-table-column
                    prop="endTime"
                    label="最后更新时间">
                  </el-table-column>
                  <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" @click="upData(scope.row.id,1)">修改</el-button>
                      <el-button type="text" @click="upData(scope.row.id,0)">删除</el-button>
                    </template>
                  </el-table-column>


                </el-table>
                <br>
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-sizes="[10, 100, 200, 400]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  style="margin-left: 750px;">
                </el-pagination>
                <br>
              </div>
            </el-col>
        </el-row>
        <!-- 展示参数end -->
    </div>
  </template>
  
  <script>
import axios from 'axios';
import { parseTime } from '@/utils/ruoyi';
  export default {
      name:"shiftIndex.vue",
      data(){
          return{
            shift:[],
            pageNum:0,
            pageSize:10,
            total:0,
            shiftEntity:{},
            time:[],
          }
      },
      created(){
        this.getShifts();
      },
      methods:{
        onSubmit() {
          this.getShifts();
        },
        getShifts(){
          // 获取班次信息
          axios.post("/shift/findAll?"+"pageSize="+this.pageSize+"&pageNum="+this.pageNum,this.shiftEntity)
          .then((res)=>{
            for (let value of res.data.data.rows) {
              value.endTime = parseTime(value.endTime,'{y}-{m}-{d} {h}:{i}:{s}');
            }
            this.shift = res.data.data.rows; 
            this.total = res.data.data.total;
          })
        
        }, 

        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.getShifts();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
          this.getShifts();
        },

        // 修改/删除补卡规则
        upData(shiftId,status){
          if(status==0){
            axios.post("/ReplacementCard/ShiftAdd",this.replacementCard)
            .then((res)=>{
              this.getShifts();
              if(res.data==1){
                this.$message({
                  message:"删除成功!!!",
                  type:"success"
                });
              }else{
                this.$message.error("删除失败请重试!");
              }
            })
          }else{
            this.$router.push({name:"shiftAdd",params:{id:shiftId}});
          }
          
        },
        // 设置时间
        setTime(){
          this.shiftEntity.startTime = this.time[0];
          this.shiftEntity.endTime = this.time[1];
        },

        // 重置条差
        rest(){
            this.shiftEntity = {};
            this.time=[];
            this.getShifts();
        },
      }
  }
  </script>
  
  <style scoped>
    .el-row {
      margin-bottom: 20px;
      
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: white;
    }
    .grid-content {
      border-radius: 8px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
    .el-icon-search{
        display: block;
    }




  /* 防止地图自动完成的对象被遮挡 */
  .tangram-suggestion {
    z-index: 9999;
  }
  </style>